<template>
  <div>
    <div class="position-relative">
      <h3 class="dialog-plate-title"><span>个人信息</span></h3>
      <div class="leftBox">
        <el-form :inline="true" :model="basicInfo" label-width="100px">
          <el-form-item  label="档案号">
            <el-input v-model="basicInfo.cardId" :disabled="disabled"  class="width220" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="basicInfo.name" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="basicInfo.idNo" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="basicInfo.age" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="basicInfo.birthday" :disabled="disabled" type="date" placeholder="选择日期" class="width220" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="basicInfo.sex" class="width220" :disabled="disabled">
              <el-option value="1" label="男" />
              <el-option value="2" label="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="basicInfo.phone" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="文化水平">
            <el-input v-model="basicInfo.educationalLevelName" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="婚姻状态">
             <el-input v-model="basicInfo.maritalStatusName" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="身份证地址" class="form-item-block">
            <el-input v-model="basicInfo.idNoAddress" type="textarea" :rows="1" :disabled="disabled" class="width320"/>
          </el-form-item>
          <el-form-item label="地址" class="form-item-block">
            <el-input v-model="basicInfo.address" type="textarea" :rows="1" :disabled="disabled" class="width320"/>
          </el-form-item>
           <el-form-item label="建档日期">
            <el-input v-model="basicInfo.createDate" :disabled="disabled" class="width220" />
          </el-form-item>
          <el-form-item label="建档护士">
            <el-input v-model="basicInfo.createNurseName" :disabled="disabled" class="width220" />
          </el-form-item>
         
        </el-form>
      </div>
      <div class="position-absolute archivalImage">
        <el-image style="width: 100%; height: 100%" :src="basicInfo.photo"  fit="cover" :preview-src-list="basicInfo.photoArray"/>
      </div>
    </div>
    <div>
      <h3 class="dialog-plate-title"><span>证件信息</span></h3>
      <el-row :gutter="20">
        <el-col :span="12" class="text-center">
           <el-image style="width:400px; height:200px" :src="basicInfo.idCardPhoto"  fit="cover" :preview-src-list="basicInfo.idCardPhotoArray"/>
        </el-col>
        <el-col :span="12" class="text-center">
           <el-image style="width:400px; height:200px" :src="basicInfo.idCardPhoto1"  fit="cover" :preview-src-list="basicInfo.idCardPhoto1Array"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import baseApi from 'plugins/axios/baseApi.js';
export default {
  name: "archivalInfo",
  props:{
    providerId:{
      type:[Number,String],
    },
    disabled:{
      type:Boolean,
      default:true
    }
  },
  data(){
    return{
      basicInfo:{},
      imageList:[]
    }
  },
  created(){
    this.getArchivalInfo()
  },
  watch:{
  },
  methods:{
    getArchivalInfo(){
      let self = this;
      baseApi.getArchivalInfo(self.providerId).then(res=>{
        self.basicInfo={...res.content};
        self.basicInfo.photo=`${res.content.photo?'data:image/png;base64,'+res.content.photo:null}`
        self.basicInfo.photoArray=[self.basicInfo.photo]
        self.basicInfo.idCardPhoto=`${res.content.idCardPhoto?'data:image/png;base64,'+res.content.idCardPhoto:null}`
        self.basicInfo.idCardPhotoArray=[self.basicInfo.idCardPhoto]
        self.basicInfo.idCardPhoto1=`${res.content.idCardPhoto1?'data:image/png;base64,'+res.content.idCardPhoto1:null}`
        self.basicInfo.idCardPhoto1Array=[self.basicInfo.idCardPhoto1]
      })
   },
 }
}
</script>
<style lang="stylus" scoped>
.leftBox{
  box-sizing:border-box
  padding-left:220px
}
.archivalImage{
  width:200px;
  height:260px;
  top:50px;
  left:10px;
}
</style>
